var CommonUI

(function () {
    var $ = jQuery
    var $w = $(window)
    var fn = {}
    var bind = {}
    var prop = {}
    	
    fn.init_masonry = function () {

        var container = document.querySelector('.masonry')
        var masonry = new Masonry( container, {
        		itemSelector: '.masonry-item'
        })
    }
    
	fn.more_list_view = function () { //더보기 버튼 클릭시 dom 가져오기	
	
		var catId="3"
		var listPerPage="6"
		var nowPage = parseInt($('.masonry-more-view').attr('idx')) + 1 //현재 페이지 index number를 가져옵니다. 
		var tUrl = 'http://demo-glamping.onsetheme.com/wp-content/themes/Glamping/proc/masonry_control.exec.php' //url 변수에 요청URL 주소를 부여해주시면 됩니다.
	    var maxPages = "2"

		if(nowPage<maxPages){
			$.ajax({
				type: "post",
				async: false,
				url: tUrl,
				data: {catId:catId,listPerPage:listPerPage,nowPage:nowPage},
				success: function(data){
					var result = data
					//alert(result)
					var result=data.split("|||")

					if (result['0'] == 'success') {
						$('.masonry').append(result['1'] )
						$('.masonry-more-view').attr('idx',nowPage)
						if((nowPage+1)>=maxPages) $('.masonry-more-view').css('display','none')
						setTimeout(fn.newItem_init, 20)
					} else {
						alert("요청실패, 재시도 바랍니다.")								
					}
				},
				error: function(data, status, err){
					alert("요청실패, 재시도 바랍니다.")
				}
			})
		}
	}

	fn.newItem_init = function () {	
		fn.init_masonry()
		setTimeout(fn.init_masonry, 20)
	}
	
	fn.setFullScreen = function (target) {
		$(target).width($w.width()).height($w.height())
	}
	
	bind.initSwiper = function () {
		var mySwiper
		
		function setSlideSize() {
			//$('.swiper-container').height($(window).width()*0.618)
			$('.swiper-container').height(($(window).height()-$('.navbar').height()-$('footer').parent().height())/1.618)
			if ($(window).width() >= 960) {
				$('.swiper-slide').width($('.container').width())
			} else {
				$('.swiper-slide').width($(window).width())
			}
		}
		
		$('.arrow-left').on('click', function(e){
			    e.preventDefault()
			    mySwiper.swipePrev()
		})
		
		$('.arrow-right').on('click', function(e){
		    e.preventDefault()
		    mySwiper.swipeNext()
	  	})
		
		setSlideSize()
		
		/*
		$(window).resize(function() {
			setSlideSize()
			var idx = mySwiper.activeIndex
			mySwiper.destroy()
			setTimeout(function() {
				$('.swiper-slide-duplicate').remove()
				initSlider()
			},50)
			
			setTimeout(function() {
				$('.swiper-pagination-switch')[idx-1].click()
			
			},50)
			
			
		})
		*/
		setTimeout(function() { initSlider() },50)
			
		function initSlider() {
			
			mySwiper = new Swiper('.swiper-container',{
				//autoplay: 5000,
				pagination: '.pagination',
			    paginationClickable: true,
			    centeredSlides: true,
			    slidesPerView: 'auto',
			    loop:true,
			    grabCursor: true,
			    speed:750, 
			    mode:'horizontal',
			    onSlideNext : function(swiper) {
			    	//console.log('next')
			    	//$('.slideNextEvtTrigger').click()
			    },
			    onSlidePrev : function(swiper) {
			    	//console.log('prev')
			    	//$('.slidePrevEvtTrigger').click()
			    }
		   })
		}
	}
	
	bind.initMasonry = function () {
		setTimeout(function() {
			fn.init_masonry()
		},500)
	    
	    $(window).resize(function() {
	    	fn.init_masonry()
		})
	}
	
	CommonUI = {
    	prop : prop,
    	fn : fn,
    	bind : bind		
    }

}())